<template>
  <div class="list-btn">
    <!-- <el-breadcrumb separator="|">
      <el-breadcrumb-item v-for="(item, index) in options" :key="index"> -->
        <template v-if="!isCollapse">
          <el-link class="list-btn-link" v-for="(item, index) in options" v-show="showBtn || item.value === 'info'" :key="index" :underline="false"  @click.native.prevent="triggerListBtn({btn: item.value, row: rowData})">
            {{$t(item.label)}}<span v-show="index !== options.length - 1">&nbsp;|&nbsp;</span>
          </el-link>
        </template>
        <template v-else>
          <template v-for="(item, index) in options" >
            <el-link class="list-btn-link" v-if="index<showNumber" :key="index" v-show="showBtn || item.value === 'info'"  :underline="false"  @click.native.prevent="triggerListBtn({btn: item.value, row: rowData})">
              {{$t(item.label)}}<span v-show="index !== showNumber-1">&nbsp;|&nbsp;</span>
            </el-link>
          </template>
          <el-popover
            v-if="showNumber-1<options.length"
            placement="bottom"
            trigger="click">
            <template v-for="(item, index) in options" >
                <el-link  class="list-btn-link" v-if="index>=showNumber" :key="index" v-show="showBtn || item.value === 'info'" :underline="false"  @click.native.prevent="triggerListBtn({btn: item.value, row: rowData})">
                  {{$t(item.label)}}<span v-show="index !== options.length-1">&nbsp;|&nbsp;</span>
                </el-link>
            </template>
            <span slot="reference" v-show="showBtn" class="reference">...</span>
          </el-popover>
          
        </template>
        <!-- <el-button
          @click.native.prevent="triggerListBtn({btn: item.value, row: rowData})"
          type="text"
          size="small"
          class="el-button-small-p-t"
        >{{$t(item.label)}}</el-button> -->
      <!-- </el-breadcrumb-item>
    </el-breadcrumb> -->
  </div>
</template>
<script>
export default {
  /**
   * table多个权限操作按钮并排组件
   */
  name: 'ListBtn',
  props: {
    // 渲染数组
    options: {
      type: Array,
      default: () => { return [] }
    },
    // 写入权限
    showBtn: {
      type: Boolean,
      default: true
    },
    rowData: {
      type: Object,
      default: () => { return {} }
    },
    //是否折叠
    isCollapse :{
      type: Boolean,
      default: false
    },
    //不折叠的个数
    showNumber :{
      type: Number,
      default: 1
    }
  },
  data () {
    return {
    }
  },
  created () {
  },
  methods: {
    triggerListBtn (k) {
      this.$emit('triggerListBtn', k)
    }
  },
  watch: {
  }
}
</script>
<style lang="scss">
  .list-btn-link.el-link.el-link--default {
      color: #004a86 !important;
      &:hover {
        color: #3a8ee6 !important;
      }
   }
  .list-btn {
    height: 23px;
    .el-breadcrumb {
      line-height: 23px !important;
    }
    .el-button-small-p-t.el-button--small {
      padding: 0px 0px !important;
    }
    .reference{
      cursor: pointer;
    }
  }
</style>
